<template>
	<view class="page">
		<lexiconNavVue title="答题详情" />
		<view class="rank">
			<view class="rank-bg">
				<view class="answer-info">
					<view class="answer-name">
						{{user_info.username}}
					</view>
					<view v-if="game_mode=='词源挑战|训练模式'" class="answer-word">
						本次词源：{{group_info.cytz_originsName}}
					</view>
					<view v-else class="answer-word">
						本次词源：{{group_info.cytz_originsName}}
					</view>
				</view>
				<view class="rank-title">
					<uv-row>
						<uv-col span="2">
							<view style="text-align: left;">轮次</view>
						</uv-col>
						<uv-col span="4">
							<view style="text-align: center;">正确答案</view>
						</uv-col>
						<uv-col span="4">
							<view style="text-align: center;">我的答案</view>
						</uv-col>
						<uv-col span="2">
							<view style="text-align: right;">结果</view>
						</uv-col>
					</uv-row>
				</view>
				<scroll-view class="words-scroll" :style="{ height: scrollHeight + 'px'}" scroll-y
					:scroll-with-animation='true'>
					<view class="rank-item" v-for="(item,index) in list" :key="index">
						<uv-row>
							<uv-col span="2">
								<view class="index">{{item.round}}</view>
							</uv-col>
							<uv-col span="4">
								<view class="answerStr">
									{{item.word}}
								</view>
							</uv-col>
							<uv-col span="4">
								<view class="answerStr">
									{{item.answer?item.answer:'-'}}
								</view>
							</uv-col>
							<uv-col span="2">
								<view style="text-align: right;">
									<image v-if="item.word==item.answer" class="result"
										src="../../../static/image/answer-right.png" mode="">
									</image>
									<image v-else class="result" src="../../../static/image/answer-error.png" mode="">
									</image>
								</view>
							</uv-col>
						</uv-row>
					</view>
				</scroll-view>

			</view>
		</view>
		<view class="bottom-view" :style="{ height: bottomHeight + 'px'}">
			<!-- #ifdef APP-PLUS -->
			<view class="btn" @click="fnSure('app')">确定</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="btn" @click="fnSure('h5')">确定</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import navbar from '../../../components/gamesNav.vue'
	export default {
		config: {
			disableScroll: true
		},
		components: {
			navbar
		},
		data() {
			return {
				group_info: {},
				user_info: {},
				bottomHeight: 0,
				scrollHeight: 0,
				group_id: '',
				game_mode: '',
				final_round: 1,
				list: []
			};
		},
		onLoad(options) {
			var that = this;
			that.group_id = options.group_id;
			that.game_mode = options.game_mode;

			that.user_info = JSON.parse(uni.getStorageSync('USER_INFO'));

			that.getGroupInfo();
			that.getRankDetail();
		},
		onReady() {
			const that = this
			this.bottomHeight = this.$util.getBottomHeight() + 60;
			uni.createSelectorQuery().select('.rank-title').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom - this.bottomHeight - 48;
			}).exec();
		},
		onShow() {
			const that = this
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'rank'
			})
		},
		mounted() {
			const that = this

			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'rank'
			})
		},
		methods: {
			getGroupInfo() {
				var that = this;
				that.$http.getGroupInfo({
					'group_id': that.group_id,
					'game_mode': that.game_mode
				}).then(res => {
					if (res.code === 200) {
						that.group_info = res.data;
					}
				})
			},

			fnSure(type) {
				var that = this;
				console.log('type===', type)
				if (type == 'app') {
					uni.navigateBack({
						delta: 1
					});
				}
				if (type == 'h5') {
					uni.navigateBack({
						delta: 1
					});
					// uni.reLaunch({
					// 	url: '/pages/games/index',
					// });
				}
			},

			// 获取排行榜列表1
			getRankDetail() {
				var that = this;
				that.$http.getRankDetail({
					'group_id': that.group_id,
					'game_mode': that.game_mode
				}).then(res => {
					console.log('1*******1')
					console.log(res)
					if (res.code === 200) {
						that.list = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: '',
							duration: 2000
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.page {
		height: 100vh;
		background: #161001;
		overflow-y: auto;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.title {
		font-family: hzgb;
		font-size: 18px;
		color: #fff;
		background: linear-gradient(to bottom, #000, #373632);
		text-align: center;
		height: 44px;
		line-height: 44px;
	}

	.rank {
		background: linear-gradient(to right, #fff497, #ffd16b);
		border-radius: 16px;
		margin: 24px 12px;
	}

	.rank-bg {
		background-image: url(../../../static/image/homePage/diwen1.png);
		background-size: 100% auto;
		background-repeat: repeat-y;
		border-radius: 16px;
		padding: 0 20px;

		.answer-info {
			padding: 20px 0px;
			display: flex;
			flex-direction: column;

			.answer-name {
				width: 100%;
				font-family: 'hzgb';
				font-size: 22px;
				color: black;
			}

			.answer-word {
				height: 30px;
				margin-top: 8px;
				border-radius: 15px;
				padding: auto 8px;
				background: #130e00;
				color: white;
				text-align: center;
				font-size: 16px;
				font-weight: 900;
				line-height: 30px;
			}
		}
	}

	.rank-title {
		width: 100%;
		font-size: 14px;
		font-family: hzgb;
		height: 32px;
		// padding: 0 12px;
	}

	.rank-item {
		padding: 10px 0;
		border-top: 2px solid #000;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;

		.index {
			width: 30px;
			height: 30px;
			border-radius: 15px;
			background: #22201a;
			text-align: center;
			line-height: 30px;
			color: white;
			font-size: 14px;
			font-weight: 900;
			flex-shrink: 0;
		}

		.answerStr {
			width: 96%;
			font-size: 16px;
			overflow: scroll;
			text-align: center;
			color: #000;
			font-family: 'hzgb';
		}

		.result {
			width: 30px;
			height: 30px;
			flex-shrink: 0;
			line-height: 30px;
			text-align: center;
			color: white;
			font-size: 14px;
		}

		.rightColor {
			background-color: #2d2ca6;
		}

		.errorColor {
			background-color: #ff261b;
		}

		.index0 {
			background-image: url(../../../static/image/fjj/rank1.png);
			color: #ffd16b;
		}

		.score {
			width: 60px;
			text-align: center;
			font-size: 24px;
			font-family: hzgb;
		}
	}

	.rank-main {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 20px;

		.avatar {
			width: 56px;
			height: 56px;
			border-radius: 56px;
			margin-right: 10px;
		}

		.username {
			color: #000;
			font-size: 18px;
			font-family: hzgb;
			margin-bottom: 4px;
			padding-left: 12px;
		}

		.num {
			width: 120px;
			background: linear-gradient(to bottom, #130e00, #373632);
			height: 24px;
			line-height: 24px;
			border-radius: 24px;
			text-align: center;
			color: #fff;
			font-size: 14px;
			margin-top: 6px;
		}
	}

	.bottom-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.btn {
			width: 130px;
			height: 40px;
			line-height: 40px;
			box-shadow: 0 6px 0 0 #d9b059;
			background: linear-gradient(to top, #fff497, #ffd16b);
			border-radius: 40px;
			text-align: center;
			font-family: hzgb;
			font-size: 16px;
		}
	}

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
	}
</style>